<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link href="/static/css/index2.css" rel="stylesheet">
    <script type="text/javascript" src="/static/js/jquery-3.2.1.js"></script>
    <script>
        $(function () {
            //条件查询
            //地区
            $.post(
                "/mains/area",
                function (areas) {
                    for(let i in areas){
                        $("[name='xid']").append("<option value='"+areas[i].xid+"'>"+areas[i].xname+"</option>");
                    }
                    $("[name='xid']").val("${mains.xid}");/*回显*/
                }
            );
            //乡镇
            $.post(
                "/mains/country",
                function (countrys) {
                    for(let i in countrys){
                        $("[name='yid']").append("<option value='"+countrys[i].yid+"'>"+countrys[i].yname+"</option>");
                    }
                    $("[name='yid']").val("${mains.yid}");
                }
            );
            //小区
            $.post(
                "/mains/garden",
                function (gardens) {
                    for(let i in gardens){
                        $("[name='zid']").append("<option value='"+gardens[i].zid+"'>"+gardens[i].zname+"</option>");
                    }
                    $("[name='zid']").val("${mains.zid}");
                }
            );
        })
        //全选、全不选
        function checkAll() {
            $("[name='ck']").prop("checked",this.checked=!this.checked);
        }
        //批删
        function dels() {
            let ids = [];
            $("[name='ck']:checked").each(function () {
                ids.push(this.value);
            })
            if (ids==null && ids.length==0){
                alert("请选择要删除得数据");
                return;
            }
            if (confirm("确定要删除"+ids+"的数据吗？")){
                $.post(
                    "/mains/dels",
                    {ids:ids},
                    function (msg) {
                        if (msg){
                            alert("删除成功");
                            location.reload();
                        }else {
                            alert("删除失败");
                        }
                    }
                );
            }
        }
    </script>
</head>
<body>
<h3>欢迎：${username}</h3>
<form method="post" action="/mains/list">
    地区名称：<select name="xid">
                <option value="">--请选择--</option>
            </select>
    乡镇名称：<select name="yid">
                <option value="">--请选择--</option>
            </select>
    小区名称：<select name="zid">
                <option value="">--请选择--</option>
            </select>
    <button>查询</button>
</form>
<table>
    <tr>
        <th colspan="8">
            <a href="/mains/toAdd">添加</a>
            <a href="/mains/toReport">报表</a>
            <button type="button" onclick="dels()">批量删除</button>
        </th>
    </tr>
    <tr>
        <th>
            <input type="checkbox" name="cks" onclick="checkAll()"/>
        </th>
        <th>序号</th>
        <th>地区</th>
        <th>乡镇</th>
        <th>小区</th>
        <th>用户</th>
        <th>创建时间</th>
        <th>操作</th>
    </tr>
    <c:forEach items="${pg.list}" var="l" varStatus="i">
        <tr>
            <td>
                <input type="checkbox" name="ck" value="${l.id}"/>
            </td>
            <td>${i.count}</td>
            <td>${l.xname}</td>
            <td>${l.yname}</td>
            <td>${l.zname}</td>
            <td>${l.username}</td>
            <td>
                <fmt:formatDate value="${l.created}" pattern="yyyy-MM-dd"></fmt:formatDate>
            </td>
            <td>
                <input type="button" value="删除" onclick="del(${l.id})"/>
                <input type="button" value="查看详情" onclick="showMain(${l.id})"/>
            </td>
        </tr>
    </c:forEach>
</table>

<!--分页jsp-->
<jsp:include page="/static/common/pages.jsp"/>
</body>
</html>